import React, { useState, useCallback, useMemo, useEffect } from 'react'
import { useTranslation, getI18n } from 'react-i18next';
import { useHistory, } from 'react-router-dom'
import Images from '@/image'
import style from './index.module.scss'
import RouterConfig from '@/object/RouterConfig';

interface IProps {
    isMobile: boolean
    account: undefined | null | string
    language: string
}
const TitleBar: React.FC<IProps> = (props: IProps) => {
    const { isMobile, account } = props
    const { t } = useTranslation();
    const { language } = getI18n()
    const { push, location: { pathname }, goBack } = useHistory()

    const renderTitleView = useMemo(() => {
        let titleDom = <></>
        if (isMobile) {
            titleDom = <div className={style.detailTitleContent}>
                <img src={Images.goBack} className={style.goBackIcon} onClick={() => {
                    goBack()
                }} />
                <span className={style.subMenuTitleText}>{t('Join and activate nodes')}</span>
            </div>
        } else {
            titleDom = <div className={style.detailTitleContent}>
                <span className={style.subMenuTitleText}
                    onClick={() => {
                        push(RouterConfig.nftNode, {})
                    }}
                >  NFT </span>
                <img src={Images.subMenuMore} className={style.subMenuMoreIcon} />
                <span className={style.subMenuTitleText} onClick={() => {
                     push(RouterConfig.nftNode, {})
                }}> {t("NFT node")} </span>
                <img src={Images.subMenuMore} className={style.subMenuMoreIcon} />
                <span className={style.subMenuTitleTextActive} onClick={() => {
                    push(RouterConfig.joinAndActive, {})
                }}> {t("Join and activate nodes")} </span>

            </div>
        }
        return titleDom
    }, [isMobile,language])

    return (
        <div className={style.TitleContainer}>
            {
                renderTitleView
            }
        </div>
    )
}
export default TitleBar 